<template>
  <div class="search">
    <div class="header">
      <div class="goback" @click="goback"><i class="yu-ui-iconfont yu-ui-search-box-back"></i></div>
      <van-search v-model="searchValue" @input="oninput" show-action placeholder="请输入产品名称、品牌、型号、SKU号"
        @search="onSearch">
        <template #action>
          <div @click="onSearch">搜&nbsp;&emsp;索</div>
        </template>
        <template #left-icon>
          <i class="yu-ui-search-icon yu-ui-iconfont yu-ui-icon-fangdajing"></i>
        </template>
      </van-search>
    </div>
    <div class="state1" v-if="state == 1">
      <div class="hotkeys">
        <h4>热搜</h4>
        <span v-for="item in hotKeys" :key="item" @click="onSearch(item)">{{ item }}</span>
      </div>
      <div class="history">
        <h4>
          <em>历史搜索</em>
          <i @click="del"></i>
        </h4>
        <span v-for="item in recentWords" :key="item" @click="onSearch(item)">{{ item }}</span>
      </div>
    </div>
    <div class="state2" v-else-if="state == 2">
      <p @click="onSearch(item.value)" v-for="item in suggestWords" :key="item.value">{{ item.value }}</p>
    </div>
    <div class="state3" v-else-if="state == 3">
      <div class="title" v-if="result">相似的类目：<span>{{ result.categoryLevel4.length }}</span>&nbsp;个&nbsp;</div>
      <div class="categorylist" v-if="result">
        <div class="item" v-for="(item, index) in result.categoryLevel4" :key="item.categoryId">
          <div v-if="index < 5">
            <img :src="item.categoryImage ? item.categoryImage : require('@/assets/img/search/default.webp')">
            <div class="name">{{ item.categoryName }}</div>
          </div>
        </div>
        <div class="more" @click="categoryShow = true">
          <i class="yu-ui-iconfont yu-ui-icon-quanbuleimu icon-quanbuleimu"></i>
          <div class="more-name">更多</div>
        </div>
        <van-overlay :show="categoryShow" @click="categoryShow = false">
          <div class="wrapper" @click.stop>
            <div class="block">
              <div class="item" v-for="item in result.categoryLevel4" :key="item.categoryId">
                <img :src="item.categoryImage ? item.categoryImage : require('@/assets/img/search/default.webp')">
                <div class="name">{{ item.categoryName }}</div>
              </div>
              <div class="more" @click="categoryShow = false">
                <i class="yu-ui-iconfont yu-ui-icon-quanbuleimu icon-quanbuleimu"></i>
                <div class="more-name">更多</div>
              </div>
            </div>
          </div>
        </van-overlay>
      </div>
      <van-tabs v-model="active" @click="onChange">
        <van-tab>
          <template #title>
            <span @click="sort = 0">销量</span>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <span>
              价格
              <i :class="{ 'active': sort == 1 }" @click="sort = 1"
                class="yu-ui-iconfont yu-ui-icon-xiangshang two-icon"></i>
              <i :class="{ 'active': sort == 2 }" @click="sort = 2"
                class="yu-ui-iconfont yu-ui-icon-xiangxia two-icon"></i>
            </span>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <span @click="brandShow = !brandShow">
              品牌
              <i class="yu-ui-iconfont yu-ui-icon-xiangxia"></i>
            </span>
          </template>
        </van-tab>
        <van-popup v-model="brandShow" round position="top" :style="{ height: '50%' }">
          <van-index-bar :index-list="indexList">
            <div v-for="item in result.classifiedBrands" :key="item.firstLetter">
              <van-index-anchor :index="item.firstLetter">{{ item.firstLetter }}</van-index-anchor>
              <van-cell :title="item1.value" v-for="item1 in item.brandList" :key="item1.key" />
            </div>
          </van-index-bar>
        </van-popup>
        <van-tab>
          <template #title>
            <span>
              筛选
              <img src="@/assets/img/search/filter.png">
            </span>
          </template>
        </van-tab>
      </van-tabs>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="item" v-for="(item, index) in list" :key="item.productSku + index">
          <router-link
            :to="{ name: 'detail', params: { id: item.productSku, name: item.productName, img: item.productImg, price: item.productMinPrice } }">
            <div class="img">
              <img :src="item.productImg">
            </div>
            <div class="content">
              <h4>{{ item.productName }}</h4>
              <p>订货编码：{{ item.productSku }}</p>
              <p>
                <span class="deliveryText">{{ item.deliveryInfo.deliveryText }}</span>
                <span class="search-has-hits">{{ item.innerTotalHits }}种规格</span>
                <span class="search-has-substitute" v-if="item.hasSubstitute">有替代</span>
              </p>
              <div class="price">
                <em>￥<span>{{ item.productMinPrice }}</span></em>
              </div>
              <div class="tag">
                <em>{{ item.memberPriceTagBean.tag }}</em>
                <div class="tag-img">
                  <img :src="item.productTagListV2.tagText">
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </van-list>
    </div>
  </div>
</template>
  
<script>
import "@/assets/iconfont/search.css"

export default {
  data() {
    return {
      searchValue: "",
      state: 1,
      hotKeys: [],
      recentWords: JSON.parse(localStorage.getItem("recentWords")) || [],
      suggestWords: [],
      pageNo: 1,
      result: "",
      categoryShow: false,
      active: 0,
      brandShow: false,
      indexList: [],
      list: [],
      loading: false,
      finished: false,
      sort: 0,
    }
  },
  created() {
    this.$apiProxy({
      url: '/hot',
      method: 'get'
    }).then(res => {
      this.hotKeys = res.data
    })
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    del() {
      this.recentWords = [];
      localStorage.removeItem("recentWords")
    },
    onSearch(val) {
      if (val.length > 0) {
        this.state = 3;
        this.searchValue = val;

        if (!this.recentWords.includes(this.searchValue)) {
          this.recentWords.push(this.searchValue);
          localStorage.setItem("recentWords", JSON.stringify(this.recentWords));
        }


        this.$apiProxy({
          url: `/searchresult?pageNo=${this.pageNo}&type=${this.sort}`,
          method: "get"
        }).then(res => {
          this.result = res.data;
          this.pageNo++;
          this.list = res.data.productList;
          res.data.classifiedBrands.forEach(item => {
            this.indexList.push(item.firstLetter)
          })
        })
      }
    },
    goSearch(e) {
      this.onSearch(e.target.innerText);
    },
    oninput(val) {
      if (val.length > 0) {
        this.state = 2;
        this.$apiProxy({
          url: `/search/association?keywords=${val}`,
          method: 'get'
        }).then(res => {
          this.suggestWords = res.data;
        })
      }
      else {
        this.state = 1;
      }
    },
    onLoad() {
      this.$apiProxy({
        url: `/searchresult?pageNo=${this.pageNo}&type=${this.sort}`,
        method: "get"
      }).then(res => {
        this.list = this.list.concat(res.data.productList);
        this.loading = false;
        if (res.data.page * 10 >= res.data.total) {
          this.finished = true
        }
        this.pageNo++;
      })
    },
    onChange() {
      this.pageNo = 1;
      this.$apiProxy({
        url: `/searchresult?pageNo=${this.pageNo}&type=${this.sort}`,
        method: "get"
      }).then(res => {
        this.pageNo++;
        this.list = res.data.productList;
      })
    }
  },
}
</script>

<style lang="less">
.search {
  background-color: #f9f9f9;

  .header {
    background-color: white;
    height: 44px;
    line-height: 44px;
    display: flex;
    border-bottom: 1px solid #F6F6F6;

    .goback {
      flex: 0;
      height: 100%;
      padding-left: 8px;

      i {
        display: block;
        margin-right: 8px;
        font-size: 15px;
        color: #333;
      }
    }

    .van-search {
      flex: 1;
      padding: 0;

      .van-search__content {
        flex: 1;
        margin: auto 0;
        position: relative;
        padding-right: 8px;
        margin-top: 8px;
        background-color: #f2f2f2;
        height: 29px;
        line-height: 29px;
        padding-left: 0px;

        .van-cell {
          padding: 0px;
          display: flex;
          align-items: center;

          .van-field__left-icon {
            margin-right: 0px;

            .yu-ui-search-icon {
              font-size: 12px;
              color: #999;
              margin: 0 8px;
              vertical-align: middle;
            }
          }

          .van-cell__value {
            .van-field__body {
              input::placeholder {
                color: #999;
                font-size: 12px;
              }
            }
          }
        }
      }

      .van-search__action {
        width: 60px;
        padding-right: 12px;
        text-align: right;
        padding-left: 0px;

        div {
          padding-left: 8px;
          font-size: 12px;
          color: #666;
        }
      }
    }
  }

  .state1 {
    .hotkeys {
      background: #fff;
      padding: 12px;
      padding-bottom: 24px;

      h4 {
        font-size: 14px;
        color: #333;
        font-weight: 400;
        padding-bottom: 5px;
        position: relative;
      }

      span {
        display: inline-block;
        padding: 5px 8px;
        background: #f0f1f3;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #666;
        border-radius: 3px;
        margin: 12px;
        margin-left: 0;
        margin-bottom: 0;
      }
    }

    .history {
      margin-top: 11px;
      padding-top: 12px;
      background-color: white;
      padding: 12px;

      h4 {
        font-size: 14px;
        color: #333;
        font-weight: 400;
        padding-bottom: 5px;
        position: relative;

        i {
          background-image: url(@/assets/img/search/del.png);
          position: absolute;
          right: 0;
          top: 0;
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100%;
        }
      }

      span {
        display: inline-block;
        padding: 5px 8px;
        background: #f0f1f3;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #666;
        border-radius: 3px;
        margin: 12px;
        margin-left: 0;
        margin-bottom: 0;
      }
    }
  }

  .state2 {
    padding: 12px;
    background: #fff;

    p {
      border-bottom: 1px solid #f2f2f2;
      font-size: 14px;
      color: #333;
      line-height: 44px;
      background: #fff;
    }
  }

  .state3 {
    .title {
      padding: 12px 12px 0;
      background: #fff;
      color: #333;
      font-size: 12px;

      span {
        color: #f74747;
      }
    }

    .categorylist {
      padding: 0 12px 7.5px;
      height: 119px;
      background: #fff;
      position: relative;
      color: #666;

      .item {
        display: inline-block;
        vertical-align: top;
        width: 51px;
        margin-right: 7.5px;
        margin-top: 12px;

        img {
          width: 51px;
          height: 51px;
        }

        .name {
          margin-top: 12px;
          margin-bottom: 4.5px;
          text-align: center;
          overflow: hidden;
          font-size: 12px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }

      .more {
        position: absolute;
        display: inline-block;
        margin-left: 15px;
        top: 25.5px;
        right: 28px;

        i {
          font-size: 26px;
          color: #666;
        }

        .more-name {
          margin-top: 22px;
          color: #666;
          font-size: 12px;
        }
      }

      .van-overlay {
        top: 70px;

        .wrapper {
          .block {
            background-color: white;
            padding: 0px 20px 20px 12px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
          }
        }
      }
    }

    .van-tabs {
      .van-tabs__wrap {
        height: 43px;

        .van-tabs__nav {
          .van-tab {
            font-size: 12px;
            color: #333;
            line-height: 43px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 12px;
            position: relative;

            i {
              top: 3.5px;
              bottom: 3.5px;
              right: 18px;
              margin: auto;
              position: absolute;
              color: #999;
              font-size: 12px;
            }

            i.active {
              color: #f74747;
            }

            .yu-ui-icon-xiangshang {
              top: -3px;
              bottom: 6.5px;
            }

            .yu-ui-icon-xiangshang+.yu-ui-icon-xiangxia {
              top: 6.5px;
              bottom: 0;
            }

            img {
              width: 12px;
              height: 12px;
              vertical-align: middle;
            }
          }

          .van-tab--active {
            color: #f74747;
          }

          .van-tabs__line {
            display: none;
          }
        }
      }

      .van-tabs__content {
        .van-overlay {
          top: 234px;
        }

        .van-popup {
          top: 234px;

          .van-index-bar {
            .van-index-bar__sidebar {
              top: 60%;
              overflow-y: auto;
              height: 300px;

              .van-index-bar__index {
                margin: 4px 8px 4px 16px;
                padding: 3px 0;
                width: 18px;
                height: 18px;
              }

              .van-index-bar__index--active {
                background-color: #f74747;
                color: #fff;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }

    .van-list {
      .item {
        color: #999;
        background-color: #fff;
        font-size: 12px;
        padding: 12px;
        position: relative;

        a {
          display: flex;
          justify-content: space-between;

          .img {
            width: 120px;
            height: 120px;
            position: relative;
          }

          .content {
            width: 210px;

            h4 {
              position: relative;
              left: 0;
              font-size: 14px;
              color: #333;
              padding-top: 3.5px;
              line-height: 19px;
              min-height: 35px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              margin-bottom: 8px;
              font-weight: 400;
            }

            p {
              overflow: visible;
              height: 16.5px;
              font-size: 12px;
              color: #999;
              margin-bottom: 7.7px;
              display: flex;
              flex-wrap: nowrap;

              .deliveryText {
                text-align: center;
                font-size: 12px;
                height: 18px;
                line-height: 16px;
                padding: 0 6px;
                min-width: 17px;
                color: #fff;
                border-radius: 3px;
                background-color: #f74747;
                border: 1px solid #f74747;
              }

              .search-has-hits {
                margin-left: 5px;
                text-align: center;
                font-size: 12px;
                height: 18px;
                line-height: 16px;
                padding: 0 6px;
                min-width: 17px;
                border-radius: 3px;
                background-color: #fff0da;
                border: 1px solid #fff0da;
                color: #666;
              }

              .search-has-substitute {
                margin-left: 5px;
                text-align: center;
                font-size: 12px;
                height: 18px;
                line-height: 16px;
                padding: 0 6px;
                min-width: 17px;
                border-radius: 3px;
                background-color: transparent;
                border: 1px solid #ccc;
                color: #333;
              }
            }

            .price {
              height: 23.5px;
              line-height: 14px;
              font-size: 13px;
              color: #f74747;
              padding-top: 3.5px;
              padding-bottom: 1px;
              width: 210px;
            }

            .tag {
              display: flex;

              em {
                margin-bottom: 8px;
                position: relative;
                margin-right: 8px;
                border-radius: 3px;
                background-color: #303030;
                border: 1px solid #303030;
                color: #e8ae3e;
                text-align: center;
                font-size: 12px;
                height: 18px;
                line-height: 16px;
                padding: 0 6px;
                min-width: 17px;
              }

              .tag-img {
                height: 12px;
                vertical-align: middle;
                margin-bottom: 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>